<template>
	<view class="content">
		<up-sticky>
			<view class="header">
				<!-- #ifdef MP-WEIXIN -->
				<wxHeader
					:left="'100rpx'"
					:font_weight="'700'"
					:isBack="true"
					:isSearch="true"
					@search="search"
					:inputWidth="inputWidth"
					:color="'#fff'"
				></wxHeader>
				<!-- #endif -->
				<!-- #ifdef APP||H5 -->
				<view class="search">
					<up-icon name="arrow-left" size="32rpx" color="#fff" @click="back"></up-icon>
					<up-input
						color="#fff"
						focus
						class="input"
						border="none"
						placeholder="这里输入关键字搜索"
						shape="circle"
						clearable
						customStyle="background:#717371"
						placeholderClass="placeholderClass"
						v-model="searchContent"
						@confirm="search"
						prefixIconStyle="font-size: 22px;color: #fff"
						prefixIcon="search"
					></up-input>
				</view>
				<!-- #endif -->
				<!-- 		<view class="search">
					<up-icon name="arrow-left" size='30rpx' color="#fff" @click="back"></up-icon>
					<up-input focus class='input' border="none" placeholder="搜索" shape="circle" clearable
						customStyle="background:#fff;height: 72rpx;" placeholderClass="placeholderClass"
						v-model="searchContent" @confirm="search">
					</up-input>
				</view> -->
			</view>
		</up-sticky>
		<view class="box" :style="{ height: height }">
			<!-- v-if='searchContentList.length!=0' -->
			<view>
				<view class="log">
					<text>搜索记录</text>
					<image
						src="http://112.124.50.179:8888/imgs/chaoshan/del.png"
						@click="del_all"
					></image>
				</view>
				<view class="log_list">
					<view
						class="tag"
						@click="tag_search(item)"
						v-for="(item, index) in searchContentList"
						:key="index"
					>
						{{ item }}
					</view>
				</view>
			</view>
			<!-- <view class="no_content" v-else>
				<image src="http://112.124.50.179:8888/imgs/chaoshan/no_content.png" mode=""></image>
				<text>抱歉，没有搜到相关内容</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
import wxHeader from '@/components/self-wx-header/self-wx-header.vue';
import { reactive, onMounted, ref, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

let height = ref('0');
let navHeight = ref('0');
let searchContent = ref('');
let searchContentList = ref([]);
let inputWidth = ref(0);
onShow(() => {
	searchContentList.value = uni.getStorageSync('item') || [];
});

onMounted(() => {
	// 计算头部输入框宽度
	// #ifdef MP-WEIXIN
	inputWidth.value =
		uni.getSystemInfoSync().screenWidth -
		wx.getMenuButtonBoundingClientRect().width -
		uni.upx2px(32 * 4 + 100);
	// #endif
	uni.createSelectorQuery()
		.select('.header')
		.boundingClientRect((res) => {
			height.value =
				uni.getSystemInfoSync().screenHeight - uni.upx2px(32 + 32) - res.height + 'px';
		})
		.exec();
	navHeight.value = getApp().globalData.navHeight;
});
const search = (e) => {
	searchContent.value = e;
	if (!searchContent.value) {
		uni.showToast({
			title: '请输入内容',
			icon: 'none'
		});
		return;
	}
	if (uni.getStorageSync('item').indexOf(searchContent.value) == -1) {
		searchContentList.value.unshift(searchContent.value);
		uni.setStorageSync('item', searchContentList.value);
	}
	uni.navigateTo({
		url: '/subPages/chaoshan/search_list?searchContent=' + searchContent.value
	});
};
const tag_search = (item) => {
	uni.navigateTo({
		url: '/subPages/chaoshan/search_list?searchContent=' + item
	});
};
const del_all = () => {
	searchContentList.value = [];
	uni.removeStorage({
		key: 'item',
		success: function (res) {
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			});
		}
	});
};
const back = () => {
	uni.navigateBack({
		delta: 1
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
}

.content {
	height: auto;
}

// ::v-deep.u-tabs__wrapper__nav__item__text {
// 	font-size: 36rpx !important;

// }

.placeholderClass {
	color: #c5c5c5;
	font-size: 26rpx;
}

/* #ifdef H5||APP */
::v-deep.u-input__content {
	padding: 0 32rpx !important;
	height: 64rpx;
}

/* #endif */

.header {
	// height: 88rpx;
	width: 100%;
	padding-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;

	.header_con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header_icon {
			display: flex;
			position: absolute;
			right: 0rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				padding-left: 30rpx;
			}
		}
	}

	.search {
		display: flex;
		align-items: center;

		.input {
			margin: 0 32rpx;
		}

		text {
			color: #f3e0bb;
		}
	}
}

.box {
	overflow: auto;

	.no_content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		text {
			color: #969da3;
		}

		image {
			width: 460rpx;
			height: 360rpx;
		}
	}

	.log {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: 30rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.log_list {
		padding-top: 32rpx;
		display: flex;
		flex-wrap: wrap;

		.tag {
			background-color: #333333;
			color: #c5c5c5;
			border-radius: 40rpx;
			padding: 16rpx 24rpx;
			font-size: 24rpx;
			margin-right: 40rpx;
			margin-bottom: 24rpx;
		}
	}
}
</style>
